<template>
    <div class="organ">
        <div class="clearfix text-r border-b-eded height-24 line-height-19 pl-20 pr-20">
            <a-button size="small" type="primary" icon="plus" class="pull-left mt-5" @click="addOrgan"></a-button>
            <a-button size="small" type="primary" icon="reload" class="mr-10" @click="getData"></a-button>
        </div>
        <vxe-table
                border
                resizable
                highlight-hover-row
                highlight-current-row
                highlight-hover-column
                highlight-current-column
                row-id="id"
                :loading="loading"
                size="mini"
                ref="menuTree"
                :context-menu="{body: {options: bodyMenus}, visibleMethod}"
                @context-menu-click="contextMenuClickEvent"
                :tree-config="{
                    children: 'childrenList',
                    expandRowKeys: expandedRowKeys,
                    accordion: false,
                    expandAll: true,
                    line: true
                }"
                :data="organList">
            <vxe-table-column min-width="150" field="organName" title="机构名称" fixed="left" tree-node></vxe-table-column>
            <vxe-table-column min-width="120" field="master" title="负责人"></vxe-table-column>
            <vxe-table-column min-width="120" field="untitled" title="联系方式"></vxe-table-column>
            <vxe-table-column min-width="120" field="address" title="联系地址"></vxe-table-column>
            <vxe-table-column min-width="120" field="createdTime" title="创建时间"></vxe-table-column>
        </vxe-table>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                organList: [],
                bodyMenus: [
                    [
                        {
                            code: 'expand',
                            name: '展开节点',
                            disabled: false,
                        },
                        {
                            code: 'contract',
                            name: '收起节点',
                            disabled: false,
                        },
                        {
                            code: 'expandAll',
                            name: '全部展开',
                            disabled: false,
                        },
                        {
                            code: 'contractAll',
                            name: '全部收起',
                            disabled: false,
                        },
                    ]
                ],
                expandedRowKeys: [],
                loading: false
            };
        },
        mounted () {
            this.getData();
        },
        methods: {
            getData () {
                this.loading = true;
                this.$api.permission.listbyorgan({
                    pageNum: 1,
                    pageSize: 20,
                }).then(res => {
                    this.loading = false;
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.organList = res && res.data && res.data.records || [];
                    this.$nextTick(() => {
                        this.$refs.menuTree.setAllTreeExpand(true);
                    });
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.errorMsg);
                });
            },
            addOrgan () {},
            //右键事件设置
            contextMenuClickEvent ({ menu, row }) {
                let xTree = this.$refs.menuTree;
                switch (menu.code) {
                    case 'expand':
                        xTree.setTreeExpansion(row, true);
                        break;
                    case 'contract':
                        xTree.setTreeExpansion(row, false);
                        break;
                    case 'expandAll':
                        xTree.setAllTreeExpand(true);
                        break;
                    case 'contractAll':
                        xTree.setAllTreeExpand(false);
                        break;
                }
            },
            //展开收缩节点配置
            visibleMethod  ({ row, type }) {
                let xTree = this.$refs.menuTree;
                if (type === 'body') {
                    this.bodyMenus.forEach(list => {
                        list.forEach(item => {
                            if (['expand', 'contract'].includes(item.code)) {
                                if (row.childrenList && row.childrenList.length) {
                                    let isExpand = xTree.isTreeExpandByRow(row);
                                    item.disabled = ['expand'].includes(item.code) ? isExpand : !isExpand;
                                } else {
                                    item.disabled = true;
                                }
                            }
                        });
                    });
                }
                return true;
            },
        }
    };
</script>
